<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡与捕获</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        window.onload = function () {
            d1 = document.getElementById("d1");
            d2 = document.getElementById("d2");
            d3 = document.getElementById("d3");
            // ture 表示在捕获阶段响应，顺序为d1-d2-d3
            // false或者不写表示在冒泡阶段响应，顺序为d3-d2-d1
            d1.addEventListener("click", function (event) {
                alert("d1响应")
            }, "ture"); 
            d2.addEventListener("click", function (event) {
                alert("d2响应")
            }, "ture"); 
            d3.addEventListener("click", function (event) {
                alert("d3响应")
            }, "ture");
        }
    </script>
</head>

<body>
    <div id="d1" style="background: #0000ff; width: 800px; height: 600px;">D1
        <div id="d2" style="background: #00ff00; width: 400px; height: 300px;">D2
            <div id="d3" style="background: #ff0000; width: 200px; height: 150px;">D3</div>
        </div>
    </div>
</body>

</html>